<template>
  <div class="home">
    <div class="block">
      <span class="demonstration">起:</span>
      <div v-for="(item, index) in date" :key="index">
        <el-date-picker v-model="item.value[0]" type="date" placeholder="选择起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions1">
        </el-date-picker>
        <span class="demonstration">止:</span>
        <el-date-picker v-model="item.value[1]" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions2">
        </el-date-picker>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    let vc = this;
    return {
      date: [
        {
          value: ['2022-01-10', '2022-01-20'],
        },
      ],
      pickerOptions1: {
        disabledDate(time) {
          console.log(vc.value2);
          if (vc.date[0].value[1]) return +new Date(time) >= +new Date(vc.date[0].value[1]);
        },
      },
      pickerOptions2: {
        disabledDate(time) {
          if (vc.date[0].value[0]) return +new Date(time) <= +new Date(vc.date[0].value[0]);
        },
      },
    };
  },
  methods: {
    /* pickerOptions1() {
      let t = this;
      return {
        disabledDate(time) {
          if (t.value2) return time.getTime() >= +new Date(t.value2);
        },
      };
    },
    pickerOptions2() {
      let t = this;
      return {
        disabledDate(time) {
          if (vc.value1) return time.getTime() <= +new Date(vc.value1);
        },
      };
    },
    handleChange1() {
      this.pickerOptions1();
    },
    handleChange2() {
      this.pickerOptions2();
    }, */
  },
};
</script>
